<template>
	<view class="container_cer_rich">
		<view class="content">
			<!-- <view class="top_title_title_rich">实名认证</view> -->
			<view class="title_title">上传身份证照片</view>
			<view class="title_title11_rich">注意：请上传本人身份证照片(边框完整，文字清晰)，非本人信息无法通过审核!</view>
			<div class="img_contanier_rich">
				<!-- #ifdef APP || MP-ALIPAY-->
				<view class="item" @click="update('1')">
					<view class="update update-fir">
						<view class="update-border">
							<image v-if="frontUrl" :src="frontUrl" class="update-img" mode="scaleToFill"></image>
							<image v-else class="update-img" src="./front.png" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="item-l">
						<view class="item-l-text">上传头像面(正面)</view>
					</view>
				</view>
				<view class="item" @click="update('2')">
					<view class="update update-sed">
						<view class="update-border">
							<image v-if="backUrl" :src="backUrl" class="update-img" mode="scaleToFill"></image>
							<image v-else class="update-img" src="./front.png" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="item-l">
						<view class="item-l-text">上传国徽面(反面)</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="item">
					<view class="update update-fir">
						<view class="update-border update-border-h5">
							<u-upload class="update-img" width="322rpx" height="204rpx" :action="action" max-count="1"
								:before-upload="beforeUpload" name="multipartFile" :header="uploadHeader"
								@on-remove="onRemove" @on-success="onSuccess"></u-upload>
						</view>
					</view>
					<view class="item-l">
						<view class="item-l-text">上传头像面(正面)</view>
					</view>
				</view>
				<view class="item">
					<view class="update update-fir">
						<view class="update-border update-border-h5">
							<u-upload class="update-img" width="322rpx" height="204rpx" :action="action" max-count="1"
								:before-upload="beforeUploadBack" name="multipartFile" :header="uploadHeader"
								@on-remove="onRemoveBack" @on-success="onSuccessBack"></u-upload>
						</view>
					</view>
					<view class="item-l">
						<view class="item-l-text">上传国徽面(反面)</view>
					</view>
				</view>
				<!-- #endif -->
			</div>
		</view>

		<form report-submit="true" @submit="formSubmit">
			<view class="realName-page-rich">
				<view v-for="(item, index) of urgent" :key="index"
					:class="'contents-item-jj contents-item-jj-' + index">
					<view class="title_title">第{{ numberList[index] }}紧急联系人</view>
					<view class="contents-item-view-jj" style="position: relative">
						<view class="label">关系：</view>
						<text @click="handleUrgentNameClick(index)">
							<template v-if="item.relation">{{ urgentArray[item.relation - 1].label }}</template>
							<span v-else style="font-size: 28rpx; color: #c4c3c3">请选择您的关系</span>
						</text>
					</view>
					<view class="contents-item-view-jj">
						<view class="label">姓名：</view>
						<input class="contents-item-input" placeholder="请输入姓名" type="text" name="name"
							style="text-align: left" v-model="urgent[index].name" />
					</view>

					<view class="contents-item-view-jj">
						<view class="label">手机号：</view>
						<input class="contents-item-input" placeholder="请输入手机号" type="text" name="phone"
							style="text-align: left" v-model="urgent[index].phone" />
					</view>
				</view>
				<view class="bottom-view">
					<view class="header" style="color: #f00; font-weight: bold">请如实填写，虚假信息审核不通过！</view>
					<view class="ysxy">
						<image class="check_img" @click="check_stu = check_stu ? false : true"
							:src="check_stu ? '../../static/HTSCIT_YES_RICH.png' : '../../static/HTSCIT_NO_RICH.png'">
						</image>
						我同意本站
						<text @click="open_url1(3)" class="b">《个人信息查询授权》</text>
					</view>
					<button form-type="submit" class="bottom-button-rich">提交</button>
				</view>
			</view>
		</form>
		<u-select v-model="showUrgentSelect" mode="single-column" :list="urgentArray" @confirm="confirm"></u-select>
		<u-modal v-model="showCountDown" class="my-count-down-modal" width="600rpx" border-radius="25"
			:title-style="{ color: 'white' }" :show-confirm-button="false">
			<view class="slot-content">
				<CircleCountDown @change="countDownChange" />
				<view class="text-tip">
					正在快马加鞭审核中，
					<br />
					请您耐心等待。
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		errHandler,
		saveUserId,
		loginHandler,
		getUserId
	} from '@/utils/index';
	import CircleCountDown from '@/components/circleCountDown/CircleCountDown.vue';
	import {
		shareConfigObj,
		baseUrl,
		APP_APPID
	} from '@/utils/constant';
	import * as imageConversion from 'image-conversion';
	import {
		sha256
	} from 'js-sha256';
	// 请求认证签名
	let timestamp = new Date().getTime();
	let appid = '58a8e1bd5501b864';
	let appSecret = 'b5c5c700fca02515366c49c640f44ff1dd16a990d4frvj6tea74';
	let sourceStr = appid + ',' + timestamp + ',' + appSecret;
	let sign = sha256(sourceStr);
	export default {
		data() {
			return {
				uploadHeader: {
					appids: appid,
					timestamps: timestamp,
					signs: sign,
					appletappid: APP_APPID
				},
				action: `${baseUrl}order/mall/components/uploadFile`,
				numberList: ['一', '二', '三', '四'],
				showUrgentSelect: false,
				showCountDown: false,
				frontUrl: null,
				backUrl: null,
				identityData: {
					idCardNo: '',
					limitDate: '',
					userName: ''
				},
				count: 0,
				visible: false,
				smsApiRes: {}, // 获取短信接口所返回的数据
				type: true,
				urgentArray: [{
						value: '1',
						label: '父亲'
					},
					{
						value: '2',
						label: '母亲'
					},
					{
						value: '3',
						label: '哥哥'
					},
					{
						value: '4',
						label: '姐姐'
					},
					{
						value: '5',
						label: '弟弟'
					},
					{
						value: '6',
						label: '妹妹'
					},
					{
						value: '7',
						label: '配偶'
					}
				],
				active: 'active',
				urgent: [{
						name: '',
						phone: '',
						relation: ''
					},
					{
						name: '',
						phone: '',
						relation: ''
					}
				],
				itemactive: 'itemactive',
				num: ',',
				check_stu: false,
				//额度类型，当为1的情况下则过风控
				balanceType: 0,
				certResult: null,
				clickUrgentIndex: '',
				isFormPro: '',


				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,


				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			};
		},
		onInit() {
			if (!this.$getUid()) {
				this.$goLogin();
			}
		},
		onLoad(e) {
			uni.hideLoading();
			if (e.balanceType) {
				this.balanceType = e.balanceType;
			}
			if (e.isFormPro) {
				this.isFormPro = e.isFormPro
			}
			if (e.type === 'my') this.type = false;
		},
		onShow() {
			uni.hideLoading();
		},
		onShareAppMessage() {
			// 禁止分享当前页面，避免提交后点击回退按钮没有反应
			return shareConfigObj;
		},
		components: {
			CircleCountDown
		},
		methods: {
			beforeUpload(index, list) {
				console.log('支付宝小程序上传', list);
				uni.showLoading({
					title: '图片处理中，稍后上传请耐心等待...'
				});
				let fileName = list[0].file.name;
				return new Promise((resolve) => {
					imageConversion.compress(list[0].file, 0.6).then((res) => {
						const file = new FileReader();
						file.onload = (e) => {
							list[0].url = e.target.result;
							resolve();
						};
						file.readAsDataURL(res);
					});
				}).catch((err) => {
					reject();
					uni.hideLoading();
				});
			},
			onRemove(index, lists) {
				this.frontUrl = '';
			},
			onSuccess(res) {
				uni.hideLoading();
				if (res.businessSuccess) {
					this.frontUrl = res.data;
					this.certificationOcr();
				} else {
					uni.showToast({
						icon: 'none',
						title: '文件上传失败！'
					});
				}
			},
			beforeUploadBack(index, list) {
				uni.showLoading({
					title: '图片处理中，稍后上传请耐心等待'
				});
				return new Promise((resolve) => {
					imageConversion.compress(list[0].file, 0.6).then((res) => {
						const file = new FileReader();
						file.onload = (e) => {
							list[0].url = e.target.result;
							resolve();
						};
						file.readAsDataURL(res);
					});
				}).catch((err) => {
					reject();
					uni.hideLoading();
				});
			},
			onSuccessBack(res) {
				uni.hideLoading();
				if (res.businessSuccess) {
					this.backUrl = res.data;
					this.certificationOcr();
				} else {
					uni.showToast({
						icon: 'none',
						title: '文件上传失败！'
					});
				}
			},
			onRemoveBack(index, lists) {
				this.backUrl = '';
			},
			open_url1(type) {
				this.$onTo(`pagesOther/xieyi/loginXy?type=` + type);
			},
			confirm(value) {
				this.urgent[this.clickUrgentIndex].relation = value[0].value;
				this.showUrgentSelect = false;
			},
			handleUrgentNameClick(index) {
				this.showUrgentSelect = true;
				this.clickUrgentIndex = index;
			},
			countDownChange(time) {
				if (time === 0) {
					this.showCountDown = false;
					this.formSubmitCallback();
				}
			},
			formSubmitCallback() {
				loginHandler(true, {}, null, true, false); // 调用接口重新保存我的信息，防止某些功能取身份证姓名一直获取不到，需要重新登录才行，注：该方法具有覆盖uid的副作用
				this.$eventEmitter.emit('refreshShiminRenZhengStatus'); // 通知我的页面重新判断一下实名认证状态
				this.$eventEmitter.emit('refreshMyPageConfigData'); // 通知我的页面重新拉取一下订单，以防止在其它平台下了单，实名认证回到我的页面订单气泡还是没变
				if (this.certResult) {
					if (this.certResult.data.isPass == 0) {
						uni.navigateTo({
							url: '/pagesMy/certificates/certificationFail?reason=' + this.certResult.data.reason
						});
					} else if (this.isFormPro) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				} else {
					uni.navigateBack();
				}
			},
			validateMobile(mobile = '') {
				return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(mobile);
			},
			formSubmit: function(e) {
				if (!this.validateSubmitForm()) {
					return;
				}
				const postObj = {
					uid: this.$getUid(),
					userName: this.identityData.userName,
					idCard: this.identityData.idCardNo,
					codeKey: this.smsApiRes.codeKey,
					userEmergencyContactDto: this.urgent,
					idCardFrontUrl: this.frontUrl,
					idCardBackUrl: this.backUrl,
					limitDate: this.identityData.limitDate,
					balanceType: this.balanceType
				};
				const {
					postData,
					pass
				} = this.$postDataGuard(postObj);
				console.log('实名认证最后上传的信息', postData);
				if (this.submiting) return;
				this.submiting = true;
				//领取的时候才展现倒计时
				if (this.balanceType == 1) {
					this.showCountDown = true;
					this.certResult = null;
				}
				this.$request('member/mall/userCertification/userCertificationAuth', postData, 'POST', false, true)
					.then((res) => {
						if (!res.success) {
							//认证失败
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							});
							this.showCountDown = false;
							this.certResult = null;
							return
						} else {
							//认证成功
							const newUid = res.data.uid; // 用户新的uid
							if (newUid) {
								// 更新uid，多平台渠道的话可以进行用户整合
								saveUserId(
									newUid
								); // 注意这里只更新了localStorage中单独的uid数据，并没有更新localStorage中userDetail里面的uid，所以在取uid的时候最好使用单独的uid字段
								if (this.balanceType == 1) {
									this.certResult = res;
								} else {
									this.certResult = null;
									this.formSubmitCallback();
								}
							} else {
								this.showCountDown = false;
								this.certResult = null;
								this.formSubmitCallback();
							}
						}
					})
					.catch(() => (this.showCountDown = false))
					.finally(() => {
						this.submiting = false;
					});
			},
			//发送验证码
			getCode() {
				var that = this;
				if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.mobile +
						'')) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入手机号'
					});
					return;
				}
				let uid = getUserId();
				this.$request(
					'member/mall/userCertification/sendSmsCode', {
						mobile: this.mobile,
						uid: uid
					},
					'GET'
				).then((res) => {
					that.smsApiRes = res.data || {}; // 提交身份证信息的时候需要用到验证码数据

					let count = 59;
					that.count = count;
					that.interval = setInterval(() => {
						count -= 1;
						that.count = count;
						if (count === 0) {
							clearInterval(that.interval);
						}
					}, 1000);
					uni.showToast({
						icon: 'none',
						title: '验证码已发送，5分钟内有效'
					});
				});
			},
			certificationOcr() {
				console.log('certificationOcr', this.frontUrl, this.backUrl);
				if (this.frontUrl && this.backUrl) {
					uni.showLoading({
						title: '文件识别中，请耐心等待...'
					});
					//调用OCR识别逻辑
					this.$request(
							'member/mall/userCertification/certificationOcr', {
								frontUrl: this.frontUrl,
								backUrl: this.backUrl,
								uid: this.$getUid()
							},
							'post'
						)
						.then((res) => {
							if (res.businessSuccess && res.data) {
								this.identityData = res.data;
								console.log('识别成功--------');
							} else {
								uni.showToast({
									title: '身份证识别失败，请您检查重新上传，谢谢！',
									icon: 'error'
								});
							}
						})
						.catch((err) => {
							this.frontUrl = null;
							this.backUrl = null;
							console.log('上传失败1-------');
							uni.showToast({
								title: '文件识别失败',
								icon: 'error'
							});
						})
						.finally(() => uni.hideLoading());
				}
			},
			/**
			 * 上传身份证号
			 * @param val:1表示正面，2表示反面
			 */
			update(val) {
				var that = this;
				//1表示正面，2表示反面
				uni.chooseImage({
					count: 1, //只能上传选择一张
					sizeType: ['compressed'],
					success: (res) => {
						console.log('upload11', res);
						uni.showLoading({
							title: '文件上传中，请耐心等待'
						});
						const tempFilePaths = res.apFilePaths || res.tempFilePaths || res.tempFiles;
						if (Object.prototype.toString.call(tempFilePaths) !== '[object Array]') {
							errHandler('请重新选择图片', true);
							return;
						}
						that.$fileUploadHandler(tempFilePaths[0], function(data) {
							uni.hideLoading();
							var imgUrls = JSON.parse(data.data).data;
							if (val === '1') {
								console.log('支付宝小程序上传正面身份证头像', imgUrls);
								that.frontUrl = imgUrls;
							} else if (val === '2') {
								that.backUrl = imgUrls;
								console.log('支付宝小程序上传反面啊身份证头像', imgUrls);
							}
							that.certificationOcr();
						});
					}
				});
			},
			validateSubmitForm() {
				let valid = true;
				if (!this.check_stu) {
					uni.showToast({
						icon: 'none',
						title: '请同意协议'
					});
					return false;
				}
				const urgent0 = this.urgent[0];
				if (!urgent0.name || !urgent0.relation) {
					uni.showToast({
						icon: 'none',
						title: '第一个联系人信息请填写完整'
					});
					return false;
				}

				if (!this.validateMobile(urgent0.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入第一个紧急联系人手机号'
					});
					return false;
				}
				const urgent1 = this.urgent[1];
				if (!urgent1.name || !urgent1.relation) {
					uni.showToast({
						icon: 'none',
						title: '第二个联系人信息请填写完整'
					});
					return false;
				}
				if (!this.validateMobile(urgent1.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入第二个紧急联系人手机号'
					});
					return false;
				}
				if (!this.frontUrl) {
					uni.showToast({
						icon: 'none',
						title: '请上传您的身份证头像面'
					});
					return false;
				}
				if (!this.backUrl) {
					uni.showToast({
						icon: 'none',
						title: '请上传您的身份证国徽面'
					});
					return false;
				}
				return valid;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.text-tip {
		text-align: center;
		margin: 30rpx 0;
	}

	.container_cer_rich {
		@include wh(100%, 100vh);
		background: #f5f5f5;
		padding-top: 1rpx;
		font-family: PingFangSC-Regular;

		.header-view {
			height: 20rpx;
			background: #f3f4f9;
		}

		.toOther {
			padding: 0 30rpx;
			width: 750rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			color: #333333;
			font-weight: 400;
			margin-bottom: 20rpx;
			@include global-background-color();
			font-size: 28rpx;


			.toOtherBtn {
				font-weight: 400;
				line-height: 50rpx;
				text-align: center;
				background: #1f2129;
				box-shadow: 0px 2px 4px 0px rgba(252, 73, 93, 0.5);
				font-size: 24rpx;
				@include global-color();
				width: 150rpx;
				height: 50rpx;
				border-radius: 49rpx;

			}
		}

		.title_title {
			padding-left: 30rpx;
			margin-bottom: 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			color: #be9364;

			&::before {
				font-size: 60rpx;
				height: 40rpx;
				vertical-align: middle;
				line-height: 0;
				display: inline-block;
				content: '.';
				margin-right: 4rpx;
			}
		}

		.title_title11_rich {
			padding: 0 50rpx 10rpx 50rpx;
			font-size: 24rpx;
			color: red;
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background: #fff;
			box-sizing: border-box;
			padding: 300rpx 0 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			background-position: 0 -30rpx;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url("./cert_top_bkg.png");


			.top_title_title_rich {
				font-weight: 500;
				color: #fff;
				position: absolute;
				top: 40rpx;
				font-size: 29rpx;
				font-family: SourceHanSansCN;
				width: 100%;
				text-align: center;

			}

			.img_contanier_rich {
				display: flex;
				padding: 0 20rpx;
				justify-content: space-between;

				.item {
					position: relative;
					width: 50%;
					box-sizing: border-box;

					.item-l {
						color: #666;
						margin: 8rpx 0 15rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: SourceHanSansCN;
					}

					.update {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 220rpx;

						.update-img {
							@include wh(322rpx, 204rpx);
						}

						.update-border {
							display: flex;
							background-size: 100% 100%;
							border-radius: 20rpx;
							align-items: center;
							justify-content: center;

						}

						.update-border-h5 {
							background-image: url(./front.png);
							background-position: center;
							background-size: contain;
							background-repeat: no-repeat;

							.update-img {
								opacity: 1;
							}

							/deep/.u-add-wrap {
								margin: 0 !important;
								opacity: 0;
							}

							/deep/.u-preview-wrap {
								margin: 0 !important;
							}
						}
					}
				}
			}
		}

		.realName-page-rich {
			background-color: #fff;

			.title_title {
				margin-bottom: 0;
				padding: 20rpx 0 0;

			}

			.xieyi {
				font-size: 24rpx;
				color: #999;
				margin: 60rpx 30rpx 20rpx 30rpx;


				.libs {
					display: flex;
					justify-content: center;
					margin: 0 auto;

					.img {
						@include wh(25rpx, 25rpx);
						margin: 2rpx 5rpx 0 0;
					}
				}

				.checkbox-text {
					.text {
						color: #c43737;
					}
				}
			}

			.bottom-view {
				padding: 0rpx 0 30rpx 0;
				box-sizing: border-box;


				.header {
					font-size: 22rpx;
					padding: 20rpx 0 0;
				}

				.ysxy {
					color: #5a5a5a;
					padding: 0 0 30rpx;
					font-size: 24rpx;
					text-align: center;

					.check_img {
						position: relative;
						top: 4px;
						right: 5px;
						width: 36rpx;
						height: 18px;
					}
				}
			}

			.bottom-button-rich {
				font-size: 28rpx;
				font-weight: 700;
				margin: 0 auto;
				color: #fff;
				text-align: center;
				background: linear-gradient(90deg, #be9364 0%, #ab845a 100%);
				box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(184, 143, 97, 0.3);
				border-radius: 49rpx;
				font-family: PingFangSC-Regular;
				letter-spacing: 0;
				line-height: 80rpx;
				width: 650rpx;
				height: 80rpx;

			}

			.disabled {
				background-color: #c43737;
				opacity: 0.64;
			}

			.bottom-view {
				font-size: 28rpx;
				color: #999;
				text-align: center;

				&-text {
					color: #00a0ff;
				}
			}
		}

		.contents-item-jj {
			font-size: 30rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			font-family: PingFangSC-Regular;
			color: #333;


			.title {
				font-weight: bold;
			}

			.contents-item-view-jj {
				display: flex;
				border-bottom: 1rpx solid #e6e6e6;
				padding: 20rpx;

				.label {
					white-space: nowrap;
					color: #4d4b4b;
					font-size: 28rpx;
					width: auto;
					text-align: left;
				}

				.input-placeholder {
					font-size: 28rpx;
					color: #c4c3c3;
				}

				.relat-out {
					width: 490rpx;
					display: flex;

					color: gray;
					justify-content: space-between;


					.relat {}

					.forward-icon {
						font-size: 40rpx !important;
						vertical-align: baseline;
					}
				}
			}

			.more {
				font-size: 30rpx;
				margin-bottom: 40rpx;
				color: #ff6700;

				.addicon {
					margin-right: 8px;
					color: #ff6700 !important;
					font-size: 34rpx !important;
					vertical-align: baseline;
				}
			}
		}

		.eject {
			padding: 0 40rpx;
			background-color: #ffffff;
			width: 100%;
			height: 500rpx;
			position: fixed;
			bottom: 0;
			box-sizing: border-box;
			transition: all 0.5s;

			.top {
				display: flex;
				justify-content: space-between;

				.top-title {}

				.clear-icon {
					color: gray !important;
				}
			}

			.relat-list {
				margin-top: 40rpx;

				.relat-item {
					text-align: center;
					margin: 20rpx 0;
					color: gray;
				}
			}
		}

		.eject.active {
			bottom: -500rpx;
		}

		.itemactive {
			color: #ff6700 !important;
		}
	}

	/deep/.my-count-down-modal {
		.u-mask {
			background-color: rgba(255, 255, 255, 0.5) !important;
			filter: blur(6px);
			backdrop-filter: blur(6px);
		}

		.u-drawer-content {
			overflow: visible !important;
			margin-top: -20%;

			.u-mode-center-box {
				background-color: transparent;
				height: 100rpx !important;
				// background-color: rgba(0, 0, 0, 0.95) !important;
				// border: 8rpx solid black;
				overflow: visible !important;
				// box-shadow: 18rpx 18rpx 30rpx rgba(0, 0, 0, 0.2), -18rpx -18rpx 30rpx rgba(255, 255, 255, 1);
				transition: all 0.2s ease-out;
			}

			.uni-scroll-view {
				overflow: visible !important;
			}
		}

		.u-model {
			margin-top: 10rpx;
			overflow: visible !important;
			background-color: transparent;

			.u-model__title {
				display: none;
				white-space: pre-wrap;
				font-family: 'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
			}

			.u-model__content {
				text-align: center;

				.slot-content {
					.my-count-down {
						margin-top: -3%;

						.u-countdown-item {
							background-color: transparent !important;

							.u-countdown-time {
								font-size: 75rpx !important;
								color: #fff !important;
							}
						}
					}

					.text-tip {
						// width: 270%;
						display: block;
						color: #282828;
						margin-top: 10%;
						font-size: 30rpx;
						font-family: 'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
						// transform: translateX(-28%);
					}

					.u-countdown-colon {
						color: #fff !important;
						font-size: 40rpx !important;
					}
				}
			}
		}
	}
</style>